<template>
  <div class="charts-container">
   <div class="ranking-list">
    <h1>借阅图书排行榜</h1>
    <el-table :data="bookRanking" style="width: 100%" >
      <el-table-column prop="rank" label="排行序号" width="100"></el-table-column>
      <el-table-column prop="book" label="书名" width="300"></el-table-column>
      <el-table-column prop="borrowCount" label="借阅人数" width="200"></el-table-column>
    </el-table>
   </div>
   <div class="charts"><h2>分类数据图</h2>
    <PieChartComponent></PieChartComponent>
   </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import PieChartComponent from './PieChartComponent.vue'
export default {
  name: 'ChartsComponents',
  components: {
    PieChartComponent
  },
  data () {
    return {
    }
  },
  created () {
    this.$store.dispatch('CheckOut/getRanking')
  },
  computed: {
    ...mapState('CheckOut', ['bookRanking'])
  },
  methods: {
  }
}
</script>

<style scoped>
    .charts-container {
        display: flex;
        padding: 10px;
        height: 300px;
        border-radius: 5px;
        margin-bottom: 10px;
        background-color: #fff;
    }
    .ranking-list {
        height: 280px;
        width: 900px;
        padding-left: 10px;
        padding-right: 10px;
        margin-right: 10px;
        border: 1px solid #ccc;
    }
    .charts {
        flex: 1;
        font-size: 12px;
        text-align: center;
        padding: 10px;
    }
    .charts h2 {
      margin: 0;
    }
</style>
